<template>
  <div>
    <div class="table_container">
      <el-table
        ref="tableNode"
        :data="listData.list"
        border
        stripe
        style="width: 100%"
        :max-height="tableCascadeHeight"
        @sort-change="_sort"
        :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
        @row-click="(row) => $refs.tableNode.toggleRowSelection(row)"
        @filter-change="handleFilterChange"
        v-loading="isLoading">
        <mes-col-comp
          :key="index"
          v-for="(column, index) in columnList"
          :column="column">
        </mes-col-comp>
        <el-table-column
          fixed="right"
          :resizable="false"
          prop="id"
          label="操作"
          align="center"
          class-name="operation_btn"
          width="88"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="jump_item" @click.stop="showLog(scope.row)">操作记录</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <mes-pagination
      @updateData="init"
      :currentPage="listData.pageNo"
      :total="listData.count || 0"
      :pageSize="listData.pageSize">
    </mes-pagination>
    <!-- 日志详情 -->
    <log-detail ref="logDetail"></log-detail>
  </div>
</template>

<script>
import computed from './normalTurnoverBatchCol'

export default {
  name: 'NormalBatchList',
  props: {
    ids: String
  },
  data() {
    return {
      isLoading: false, // 是否加载
      showStatus: false, // 组件是否显示
      searchData: {}, // 搜索列表数据
      sortData: {}, // 排序字段
      insertData: {}, // 调度组件数据导入
      searchResult: NaN, // 搜索结果数
      selectData: [], // 清单选择列表
      listData: [], // 清单列表数据
      workorderIds: '', // 工单ID
      workeroderMsg: null, // 任务号、工单号
    }
  },
  computed: computed,
  mounted() {
    this.workorderIds = this.ids
    this.init()
  },
  methods: {
    // 列筛选回调
    handleFilterChange(filters) {
      this.sortData = {}
      this.$refs.tableNode.clearSort()
      let filterParams = this.$filterParams(this.searchList, filters)
      Object.assign(this.searchData, filterParams.search)
      Object.assign(this.sortData, filterParams.order)
      this.init()
    },
    /**
     * 刷新数据
     * @param ids 工单id
     * @param workeroderMsg 任务号、工单号
     */
    refresh(ids, workeroderMsg) {
      this.$refs.tableNode.clearSort()
      this.$refs.tableNode.clearFilter()
      this.sortData = {}
      this.workorderIds = ids || undefined
      this.workorderIds = ids || (Array.isArray(workeroderMsg) ? workeroderMsg.join(',') : undefined)
      if (!Array.isArray(workeroderMsg) && workeroderMsg) {
        this.workeroderMsg = {taskNumber: workeroderMsg || undefined}
      } else {
        this.workeroderMsg = {taskNumber: undefined}
      }
      this.init()
    },
    // 获取请求数据
    getPostData(page) {
      const fields = ['workorderId', 'workorderNumber', 'id', 'turnoverStatusId', 'turnoverStatusValue', 'turnoverProcessStatusId', 'turnoverProcessStatusValue', 'trackDemandId', 'trackDemandValue', 'taskTypeId', 'taskTypeValue']
      let postData = {
        pageNo: page ? page.pageNo : 1,
        pageSize: page ? page.pageSize : this.listData.pageSize || 15,
        sort: this.sortData,
        query: {
          columns: this.columnList.reduce((pre, cur) => [...pre, cur.prop], fields),
          ...this.searchData,
          viewSource: 6,
          ...this.workeroderMsg
        }
      }
      postData.query.workorderId = this.workorderIds
      return postData
    },
    /**
     * 列表数据请求
     * @param page
     */
    init(page) {
      this.isLoading = true
      let postData = this.getPostData(page)
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnoverbatch/turnoverBatch/list',
        data: postData,
        noCommit: true
      }).then((data) => {
        let res = data.data
        this.listData = res
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 日志
    showLog(row) {
      this.$refs.logDetail.openDialog({
        title: '周转码',
        name: row.number,
        url: 'a/turnoverstatuschangehistory/turnoverStatusChangeHistory/list',
        query: {
          turnoverBatchId: row.id
        }
      })
    },
    /**
     * 提示
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .batch_list {
    padding: 10px 0 20px 0;
    margin: 0 20px 50px 20px;
  }

  .btn_title {
    padding-left: 20px;
  }

  .btn_panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    font-size: 14px;
  }

  .normal_panel {
    color: @mesFontWhite !important;
    i {
      color: @mesFontWhite;
    }
  }

  .el-table .cell {
    .btn_cell {
      cursor: pointer;
      color: @mesAvailableBtnC;
      i {
        padding-right: 4px;
      }
      &.active {
        color: @mesAvailableBtnC;
      }
      &.end {
        color: @mesDisvailableBtnC !important;
        cursor: not-allowed !important;
      }
    }
  }
</style>
